<template>
    <div class="table" v-loading.body="loading">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>考前冲刺管理</el-breadcrumb-item>
<!--                 <el-breadcrumb-item>基础表格</el-breadcrumb-item> -->
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-button type="success" icon="plus" class="handle-del mr10" @click="create">添加真题</el-button>
            <el-button type="warning" icon="upload" class="handle-del mr10" @click="create">导入真题</el-button>
<!--             <el-button type="warning" icon="setting" class="handle-del mr10" @click="regenerate">重置</el-button> -->
<!--             <el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
                <el-option key="1" label="广东省" value="广东省"></el-option>
                <el-option key="2" label="湖南省" value="湖南省"></el-option>
            </el-select> -->
            <el-select v-model="search.pq_test_category_id" placeholder="请选择" class="handle-select mr10">
		        <el-option
		          v-for="item in test_categories"
		          :key="item.id"
		          :label="item.title"
		          :value="item.id">
		            <span>{{item.prefix}}{{item.title}}</span>
		        </el-option>
		    </el-select>
            <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="search" @click="list">搜索</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange" >
<!--             <el-table-column type="selection" width="55"></el-table-column> -->
            <el-table-column prop="title" label="标题" width="320">
            </el-table-column>
            <el-table-column prop="category_title" label="考试分类" width="120">

            </el-table-column>
            <el-table-column prop="test_count" label="测验次数">
            </el-table-column>
            <el-table-column label="平均得分">
                <template scope="scope">
                    <el-tag type="success">{{scope.row.average_point}}</el-tag>
                </template>
            </el-table-column>
            
            <el-table-column prop="hard_rate" label="难度">
                <template scope="scope">
                    <el-rate
						  v-model="scope.row.hard_rate"
						  disabled
							>
					</el-rate>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small"
                            @click="edit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="primary" @click="goto(scope.row)">管理题目</el-button>
                    <el-button size="small" type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="pagination.current"
                    :page-size="pagination.size"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <div class="dialog">
            <el-dialog title="基本信息" :visible.sync="isadding">
              <el-form :model="testlib">
                <el-form-item label="标题" label-width="80px">
                  <el-input v-model="testlib.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="测试分类" label-width="80px">
                  <el-select v-model="testlib.pq_test_category_id" placeholder="请选择" size="180px" >
                    <el-option
                      v-for="item in test_categories"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                        <span>{{item.prefix}}{{item.title}}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="省市区域" label-width="80px" v-show="category_code[testlib.pq_test_category_id] != 'GK'">
                    <el-cascader
                    v-model="area_codes"
                    :options="areas"
                    :props="{ label: 'title', value: 'id',checkStrictly: true}"
                    size="big"
                    filterable>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="开始时间" label-with="80px">
                    <el-date-picker
                      v-model="testlib.spirit_start"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      format="yyyy-MM-dd HH:mm:ss"
                      @change="getSTime"
                      placeholder="选择开始日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" label-with="80px">
                    <el-date-picker
                      v-model="testlib.spirit_end"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      format="yyyy-MM-dd HH:mm:ss"
                      @change="getETime"
                      placeholder="选择结束日期时间">
                    </el-date-picker>
                </el-form-item>               
                <el-form-item label="难度" label-width="80px">
                  		<el-rate
						  v-model="testlib.hard_rate"
						  text-color="#ff9900"
							>
						</el-rate>
                </el-form-item>
                <el-form-item label="发布" label-width="80px">
                	<el-radio class="radio" v-model="testlib.state" label="1">发布</el-radio>
					<el-radio class="radio" v-model="testlib.state" label="0">不发布</el-radio>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="isadding = false">取 消</el-button>
                <el-button type="primary" @click="save(true)" v-show="testlib.id < 1">确 定</el-button>
                <el-button type="success" @click="save(false)" v-show="testlib.id > 0">更 新</el-button>
              </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import http from "../../lib/http"
    import tree from "../../lib/tree"
    import "../../assets/main.css"
    export default {
        data : function() {
            return {
                //url: './static/vuetable.json',
                isadding : false,
                loading : true,
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                dataTotal : 0,
                test_categories : [],
                category_code : {},
                area_codes: [],
                areas : [],
                search : {
                    pq_test_category_id : ""
                },
                testlib : {
                    id : '',
                    title : '',
                    hard_rate : 1,
                    average_point : "1",
                    test_count : "0",
                    score : "100",
                    state : '1',
                    pq_test_category_id : "20",
                    spirit_start : "",
                    spirit_end : ""
                },
                pagination : {
                    current : 1,
                    total : 0,
                    size : 20
                }
            }
        },
        created : function(){
            var self = this
            http.alive(this,function(){
                self.list();
                self.getCategory();
                self.getProvinceCity();
            })
        },
        computed: {
            // tableData : function(){
            //     var self = this;
            //     // return self.tableData.filter(function(d){
            //     //     console.log(d)
            //     //     d.hard_rate  *= 1
            //     // })
            // }
        },
        methods: {
            handleCurrentChange : function(val){
                this.cur_page = val;
                this.list();
            },
            getCategory : function(){
                var self = this;
                http.get(self,"test_categories/code/CS_ROOT").then((res) => {
                    var response = res.data
                    if (response.code == "ok") {
                        self.test_categories = tree.make(response.data,"pid",response.data[0].id)
                        self.test_categories.forEach((val) => {
                            if(val.code != "") {
                                self.category_code[val.id] = val.code
                            }
                        })
                    }
                })
            },
            getSTime: function(val){
                this.testlib.spirit_start = val
            },
            getETime: function(val){
                this.testlib.spirit_end = val
            },
            getProvinceCity : function() {
                var self = this
                http.get(self,"area/all").then((res) => {
                    var response = res.data
                    if (response.code == "ok") {
                        self.areas = response.data
                    }
                })
            },
            list : function(){
                var self = this;
                this.loading = true
                var params = {
                	skip : (this.pagination.current - 1) * this.pagination.size,
                	limit : this.pagination.size,
                    category_id : this.search.pq_test_category_id,
                    is_spirit : 1
                }
                http.get(self,"cs_test_libraries_back",params).then((res) => {
                    var response = res.data
                    self.loading = false
                    if (response.code == "ok") {
                        if (!response.data) {
                            self.tableData = []
                            self.pagination.total = 0
                        }
                        else{
                            for(var i=0,j=response.data.length;i<j;i++){
                                response.data[i].hard_rate *= 1
                            }
                            self.tableData = response.data
                            self.pagination.total = response.total * 1
                        }
                    }
                })
            },
            categoryChange: function(){
                console.log(this.testlib.pq_test_category_id)
            },
            create : function(){
                this.isadding = true
                this.testlib.pq_test_category_id = this.test_categories[0].id
                this.testlib.is_spirit = 1
            },
           save : function(add){
                var self = this
                if(this.area_codes.length > 0){
                    //国考不用选省市
                    if(this.category_code[this.testlib.pq_test_category_id] == "GK") {
                        this.testlib.area_code = ''
                        this.testlib.area_codes = ''
                    }
                    //省考选择底一层省级区域
                    else if(this.category_code[this.testlib.pq_test_category_id] == "SK") {
                        this.testlib.area_code = this.area_codes[0]
                        this.testlib.area_codes = this.area_codes.join(",")
                    } else {
                        this.testlib.area_code = this.area_codes[this.area_codes.length-1]
                        this.testlib.area_codes = this.area_codes.join(",")
                    }
                }
                http.post(this,"cs_test_libraries",this.testlib).then((res)=>{
                    self.isadding = false
                    var data = res.data
                    if (data.code == "ok") {
                        self.$notify.success({
                            title : '成功',
                            message : '保存成功'
                        })
                        self.list()
                    }
                    else{
                        self.$notify.error({
                            title : "错误",
                            message : data.msg
                        })
                    }
                })
            },
            formatter : function(row, column) {
                return row.address;
            },
            goto : function(row){
                location.href = '#/spiritlib-'+row.id
            },
            // filterTag : function(value, row) {
            //     return row.tag === value;
            // },
            edit : function(index, testlib) {
                this.isadding = true
                this.area_codes = []
                this.testlib = JSON.parse(JSON.stringify(testlib))
                if(this.testlib.area_codes != "") {
                    var selectedArea = this.testlib.area_codes.split(",")
                    console.log(selectedArea)
                    selectedArea.forEach(o => {
                        this.area_codes.push(o*1)
                    });
                    //this.area_codes = 
                    console.log(this.area_codes)
                }
            },
            del : function(index, row) {
                var self = this
                this.$confirm('此操作将删除内含真题,确定操作吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    http.delete(this,"cs_test_libraries/"+row.id).then(function(res){
                        self.list()
                    })
                }).catch(() => {

                });
            },
            handleSelectionChange : function(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>
